<template>
  <div class="newgoods">
    新品首发人气推荐页面
    <div class="top" @click="sortPrice">
      <p :class="`${current === 'default' ? '' : 'on'}`">
        价格
      </p>
      <div class="iconBox">
        <van-icon :color="current === 'up' ? 'red' : ''" name="arrow-up" />
        <van-icon :color="current === 'down' ? 'red' : ''" name="arrow-down" />
      </div>
    </div>
    <van-grid :column-num="2">
      <van-grid-item v-for="item in list" :key="item.id">
        <img class="pic" :src="item.list_pic_url" alt="">
        <h2>
          {{ item.name }}
        </h2>
        ￥{{ item.retail_price }}
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import {goodsList} from '../api/home/newGoods'

export default {
  data() {
    return {
      list:[],
      id:"",
      order:"",
      current:'default'// default up down
    };
  },
  computed: {

  },
  created() {
    // /home/newgoods/2     this.$route.params.id
    // /home/newgoods?id=2  this.$route.query.id

    this.id = this.$route.params.id;
    console.log(this.$route.params.id)
    this.init();
  },
  mounted() {

  },
  methods: {
    init(){
      goodsList({
        isHot:this.id == 2 ? 1 : "",
        isNew:this.id == 1 ? 1 : "",
        order:this.order
      })
          .then(res =>{
            console.log(res)
            this.list = res.data;
          })
    },
    sortPrice(){
      if(this.current == "default"){
        this.current = "up";
        this.order = "asc"
      }else if(this.current == "up"){
        this.current = "down";
        this.order = "desc"
      }else{
        this.current = "up";
        this.order = "asc"
      }
      this.init();
    }
  },
};
</script>

<style scoped lang="scss">
@import "index.scss";
</style>
